extends ../_layout/default.pug

block styles
  link(href='node_modules/@coreui/chartjs/dist/css/coreui-chartjs.css', rel='stylesheet')

block scripts
  script(src='node_modules/chart.js/dist/chart.umd.js')
  script(src='node_modules/@coreui/chartjs/dist/js/coreui-chartjs.js')
  script(src='node_modules/@coreui/utils/dist/umd/index.js')
  script(src='js/widgets.js')

block breadcrumb
  +breadcrumb(
    [
      { href: '#', label: 'Home'},
      { label: 'Components'},
      { label: 'Widgets'}
    ]
  )

block view
  .card.mb-4
    .card-header
      string Widgets
    .card-body
      +example()
        .row.g-4
          .col-12.col-sm-6.col-xl-4.col-xxl-3
            .card.text-white.bg-primary
              .card-body.pb-0.d-flex.justify-content-between.align-items-start
                div
                  .fs-4.fw-semibold 26K 
                    span.fs-6.fw-normal (-12.4%
                      svg.icon
                        use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-arrow-bottom")
                      | )
                  div Users
                .dropdown
                  button.btn.btn-transparent.text-white.p-0(type='button', data-coreui-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
                    svg.icon
                      use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-options")
                      |
                  .dropdown-menu.dropdown-menu-end
                    a.dropdown-item(href='#') Action
                    a.dropdown-item(href='#') Another action
                    a.dropdown-item(href='#') Something else here
              .c-chart-wrapper.mt-3.mx-3(style='height:70px;')
                canvas#card-chart1.chart(height='70')
          // /.col
          .col-12.col-sm-6.col-xl-4.col-xxl-3
            .card.text-white.bg-info
              .card-body.pb-0.d-flex.justify-content-between.align-items-start
                div
                  .fs-4.fw-semibold $6.200 
                    span.fs-6.fw-normal (40.9%
                      svg.icon
                        use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-arrow-top")
                      | )
                  div Income
                .dropdown
                  button.btn.btn-transparent.text-white.p-0(type='button', data-coreui-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
                    svg.icon
                      use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-options")
                  .dropdown-menu.dropdown-menu-end
                    a.dropdown-item(href='#') Action
                    a.dropdown-item(href='#') Another action
                    a.dropdown-item(href='#') Something else here
              .c-chart-wrapper.mt-3.mx-3(style='height:70px;')
                canvas#card-chart2.chart(height='70')
          // /.col
          .col-12.col-sm-6.col-xl-4.col-xxl-3
            .card.text-white.bg-warning
              .card-body.pb-0.d-flex.justify-content-between.align-items-start
                div
                  .fs-4.fw-semibold 2.49% 
                    span.fs-6.fw-normal (84.7%
                      svg.icon
                        use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-arrow-top")
                      | )
                  div Conversion Rate
                .dropdown
                  button.btn.btn-transparent.text-white.p-0(type='button', data-coreui-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
                    svg.icon
                      use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-options")
                  .dropdown-menu.dropdown-menu-end
                    a.dropdown-item(href='#') Action
                    a.dropdown-item(href='#') Another action
                    a.dropdown-item(href='#') Something else here
              .c-chart-wrapper.mt-3(style='height:70px;')
                canvas#card-chart3.chart(height='70')
          // /.col
          .col-12.col-sm-6.col-xl-4.col-xxl-3
            .card.text-white.bg-danger
              .card-body.pb-0.d-flex.justify-content-between.align-items-start
                div
                  .fs-4.fw-semibold 44K 
                    span.fs-6.fw-normal (-23.6%
                      svg.icon
                        use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-arrow-bottom")
                      | )
                  div Sessions
                .dropdown
                  button.btn.btn-transparent.text-white.p-0(type='button', data-coreui-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
                    svg.icon
                      use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-options")
                  .dropdown-menu.dropdown-menu-end
                    a.dropdown-item(href='#') Action
                    a.dropdown-item(href='#') Another action
                    a.dropdown-item(href='#') Something else here
              .c-chart-wrapper.mt-3.mx-3(style='height:70px;')
                canvas#card-chart4.chart(height='70')
      +example() 
        .row.g-4
          .col-12.col-sm-6.col-xl-4.col-xxl-3
            .card
              .card-body
                .fs-4.fw-semibold 89.9%
                div Widget title
                .progress.progress-thin.my-2
                  .progress-bar.bg-success(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
                small.text-body-secondary Widget helper text
          // /.col
          .col-12.col-sm-6.col-xl-4.col-xxl-3
            .card
              .card-body
                .fs-4.fw-semibold 12.124
                div Widget title
                .progress.progress-thin.my-2
                  .progress-bar.bg-info(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
                small.text-body-secondary Widget helper text
          // /.col
          .col-12.col-sm-6.col-xl-4.col-xxl-3
            .card
              .card-body
                .fs-4.fw-semibold $98.111,00
                div Widget title
                .progress.progress-thin.my-2
                  .progress-bar.bg-warning(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
                small.text-body-secondary Widget helper text
          // /.col
          .col-12.col-sm-6.col-xl-4.col-xxl-3
            .card
              .card-body
                .fs-4.fw-semibold 2 TB
                div Widget title
                .progress.progress-thin.my-2
                  .progress-bar.bg-danger(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
                small.text-body-secondary Widget helper text
          // /.col
        // /.row.g-4
      +example()
        .row.g-4
          .col-12.col-sm-6.col-xl-4.col-xxl-3
            .card.text-white.bg-primary
              .card-body
                .fs-4.fw-semibold 89.9%
                div Widget title
                .progress.progress-white.progress-thin.my-2
                  .progress-bar(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
                small.text-white.text-opacity-75 Widget helper text
          // /.col
          .col-12.col-sm-6.col-xl-4.col-xxl-3
            .card.text-white.bg-warning
              .card-body
                .fs-4.fw-semibold 12.124
                div Widget title
                .progress.progress-white.progress-thin.my-2
                  .progress-bar(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
                small.text-white.text-opacity-75 Widget helper text
          // /.col
          .col-12.col-sm-6.col-xl-4.col-xxl-3
            .card.text-white.bg-danger
              .card-body
                .fs-4.fw-semibold $98.111,00
                div Widget title
                .progress.progress-white.progress-thin.my-2
                  .progress-bar(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
                small.text-white.text-opacity-75 Widget helper text
          // /.col
          .col-12.col-sm-6.col-xl-4.col-xxl-3
            .card.text-white.bg-info
              .card-body
                .fs-4.fw-semibold 2 TB
                div Widget title
                .progress.progress-white.progress-thin.my-2
                  .progress-bar(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
                small.text-white.text-opacity-75 Widget helper text
          // /.col
        // /.row.g-4
      +example()
        .row.g-4
          .col-6.col-sm-4.col-xl-2
            .card
              .card-body.text-center
                .text-body-secondary.small.text-uppercase.fw-semibold Title
                .fs-6.fw-semibold.py-3 1,123
                .c-chart-wrapper.mx-auto(style='height:40px;width:80px')
                  canvas#sparkline-chart-1.chart.chart-bar(height='40', width='80')
          // /.col
          .col-6.col-sm-4.col-xl-2
            .card
              .card-body.text-center
                .text-body-secondary.small.text-uppercase.fw-semibold Title
                .fs-6.fw-semibold.py-3 1,123
                .c-chart-wrapper.mx-auto(style='height:40px;width:80px')
                  canvas#sparkline-chart-2.chart.chart-bar(height='40', width='80')
          // /.col
          .col-6.col-sm-4.col-xl-2
            .card
              .card-body.text-center
                .text-body-secondary.small.text-uppercase.fw-semibold Title
                .fs-6.fw-semibold.py-3 1,123
                .c-chart-wrapper.mx-auto(style='height:40px;width:80px')
                  canvas#sparkline-chart-3.chart.chart-bar(height='40', width='80')
          // /.col
          .col-6.col-sm-4.col-xl-2
            .card
              .card-body.text-center
                .text-body-secondary.small.text-uppercase.fw-semibold Title
                .fs-6.fw-semibold.py-3 1,123
                .c-chart-wrapper.mx-auto(style='height:40px;width:80px')
                  canvas#sparkline-chart-4.chart.chart-line(height='40', width='100')
          // /.col
          .col-6.col-sm-4.col-xl-2
            .card
              .card-body.text-center
                .text-body-secondary.small.text-uppercase.fw-semibold Title
                .fs-6.fw-semibold.py-3 1,123
                .c-chart-wrapper.mx-auto(style='height:40px;width:80px')
                  canvas#sparkline-chart-5.chart.chart-line(height='40', width='100')
          // /.col
          .col-6.col-sm-4.col-xl-2
            .card
              .card-body.text-center
                .text-body-secondary.small.text-uppercase.fw-semibold Title
                .fs-6.fw-semibold.py-3 1,123
                .c-chart-wrapper.mx-auto(style='height:40px;width:80px')
                  canvas#sparkline-chart-6.chart.chart-line(height='40', width='100')
          // /.col
        // /.row.g-4
      +example()
        .row.g-4
          .col-12.col-sm-6.col-xl-4.col-xxl-3
            .card
              .card-body.p-3.d-flex.align-items-center
                div.bg-primary.text-white.p-3.me-3
                  svg.icon.icon-xl
                    use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-settings")
                    |
                div
                  .fs-6.fw-semibold.text-primary $1.999,50
                  .text-body-secondary.text-uppercase.fw-semibold.small Widget title
          // /.col
          .col-12.col-sm-6.col-xl-4.col-xxl-3
            .card
              .card-body.p-3.d-flex.align-items-center
                div.bg-info.text-white.p-3.me-3
                  svg.icon.icon-xl
                    use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-laptop")
                    |
                div
                  .fs-6.fw-semibold.text-info $1.999,50
                  .text-body-secondary.text-uppercase.fw-semibold.small Widget title
          // /.col
          .col-12.col-sm-6.col-xl-4.col-xxl-3
            .card
              .card-body.p-3.d-flex.align-items-center
                div.bg-warning.text-white.p-3.me-3
                  svg.icon.icon-xl
                    use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-moon")
                    |
                div
                  .fs-6.fw-semibold.text-warning $1.999,50
                  .text-body-secondary.text-uppercase.fw-semibold.small Widget title
          // /.col
          .col-12.col-sm-6.col-xl-4.col-xxl-3
            .card
              .card-body.p-3.d-flex.align-items-center
                div.bg-danger.text-white.p-3.me-3
                  svg.icon.icon-xl
                    use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-bell")
                    |
                div
                  .fs-6.fw-semibold.text-danger $1.999,50
                  .text-body-secondary.text-uppercase.fw-semibold.small Widget title
          // /.col
      +example()
        .row.g-4
          .col-12.col-sm-6.col-xl-4.col-xxl-3
            .card
              .card-body.p-3.d-flex.align-items-center
                div.bg-primary.text-white.p-3.me-3
                  svg.icon.icon-xl
                    use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-settings")
                    |
                div
                  .fs-6.fw-semibold.text-primary $1.999,50
                  .text-body-secondary.text-uppercase.fw-semibold.small Widget title
              .card-footer.px-3.py-2
                a.btn-block.text-body-secondary.d-flex.justify-content-between.align-items-center(href='#')
                  span.small.fw-semibold View More
                  svg.icon
                    use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-chevron-right")
                    |
          // /.col
          .col-12.col-sm-6.col-xl-4.col-xxl-3
            .card
              .card-body.p-3.d-flex.align-items-center
                div.bg-info.text-white.p-3.me-3
                  svg.icon.icon-xl
                    use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-laptop")
                    |
                div
                  .fs-6.fw-semibold.text-info $1.999,50
                  .text-body-secondary.text-uppercase.fw-semibold.small Widget title
              .card-footer.px-3.py-2
                a.btn-block.text-body-secondary.d-flex.justify-content-between.align-items-center(href='#')
                  span.small.fw-semibold View More
                  svg.icon
                    use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-chevron-right")
                    |
          // /.col
          .col-12.col-sm-6.col-xl-4.col-xxl-3
            .card
              .card-body.p-3.d-flex.align-items-center
                div.bg-warning.text-white.p-3.me-3
                  svg.icon.icon-xl
                    use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-moon")
                    |
                div
                  .fs-6.fw-semibold.text-warning $1.999,50
                  .text-body-secondary.text-uppercase.fw-semibold.small Widget title
              .card-footer.px-3.py-2
                a.btn-block.text-body-secondary.d-flex.justify-content-between.align-items-center(href='#')
                  span.small.fw-semibold View More
                  svg.icon
                    use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-chevron-right")
                    |
          // /.col
          .col-12.col-sm-6.col-xl-4.col-xxl-3
            .card
              .card-body.p-3.d-flex.align-items-center
                div.bg-danger.text-white.p-3.me-3
                  svg.icon.icon-xl
                    use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-bell")
                    |
                div
                  .fs-6.fw-semibold.text-danger $1.999,50
                  .text-body-secondary.text-uppercase.fw-semibold.small Widget title
              .card-footer.px-3.py-2
                a.btn-block.text-body-secondary.d-flex.justify-content-between.align-items-center(href='#')
                  span.small.fw-semibold View More
                  svg.icon
                    use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-chevron-right")
                    |
          // /.col
        // /.row.g-4
      +example()
        .row.g-4
          .col-12.col-sm-6.col-xl-4.col-xxl-3
            .card.overflow-hidden
              .card-body.p-0.d-flex.align-items-center
                div.bg-primary.text-white.p-4.me-3
                  svg.icon.icon-xl
                    use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-settings")
                    |
                div
                  .fs-6.fw-semibold.text-primary $1.999,50
                  .text-body-secondary.text-uppercase.fw-semibold.small Widget title
          // /.col
          .col-12.col-sm-6.col-xl-4.col-xxl-3
            .card.overflow-hidden
              .card-body.p-0.d-flex.align-items-center
                div.bg-info.text-white.p-4.me-3
                  svg.icon.icon-xl
                    use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-laptop")
                    |
                div
                  .fs-6.fw-semibold.text-info $1.999,50
                  .text-body-secondary.text-uppercase.fw-semibold.small Widget title
          // /.col
          .col-12.col-sm-6.col-xl-4.col-xxl-3
            .card.overflow-hidden
              .card-body.p-0.d-flex.align-items-center
                div.bg-warning.text-white.p-4.me-3
                  svg.icon.icon-xl
                    use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-moon")
                    |
                div
                  .fs-6.fw-semibold.text-warning $1.999,50
                  .text-body-secondary.text-uppercase.fw-semibold.small Widget title
          // /.col
          .col-12.col-sm-6.col-xl-4.col-xxl-3
            .card.overflow-hidden
              .card-body.p-0.d-flex.align-items-center
                div.bg-danger.text-white.p-4.me-3
                  svg.icon.icon-xl
                    use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-bell")
                    |
                div
                  .fs-6.fw-semibold.text-danger $1.999,50
                  .text-body-secondary.text-uppercase.fw-semibold.small Widget title
          // /.col
      +example()
        .row.g-4   
          .col-12.col-sm-6.col-xl-4.col-xxl-3
            .card.overflow-hidden
              .card-body.p-0.d-flex.align-items-center
                div.bg-primary.text-white.py-4.px-5.me-3
                  svg.icon.icon-xl
                    use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-settings")
                    |
                div
                  .fs-6.fw-semibold.text-primary $1.999,50
                  .text-body-secondary.text-uppercase.fw-semibold.small Widget title
          // /.col
          .col-12.col-sm-6.col-xl-4.col-xxl-3
            .card.overflow-hidden
              .card-body.p-0.d-flex.align-items-center
                div.bg-info.text-white.py-4.px-5.me-3
                  svg.icon.icon-xl
                    use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-laptop")
                    |
                div
                  .fs-6.fw-semibold.text-info $1.999,50
                  .text-body-secondary.text-uppercase.fw-semibold.small Widget title
          // /.col
          .col-12.col-sm-6.col-xl-4.col-xxl-3
            .card.overflow-hidden
              .card-body.p-0.d-flex.align-items-center
                div.bg-warning.text-white.py-4.px-5.me-3
                  svg.icon.icon-xl
                    use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-moon")
                    |
                div
                  .fs-6.fw-semibold.text-warning $1.999,50
                  .text-body-secondary.text-uppercase.fw-semibold.small Widget title
          // /.col
          .col-12.col-sm-6.col-xl-4.col-xxl-3
            .card.overflow-hidden
              .card-body.p-0.d-flex.align-items-center
                div.bg-danger.text-white.py-4.px-5.me-3
                  svg.icon.icon-xl
                    use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-bell")
                    |
                div
                  .fs-6.fw-semibold.text-danger $1.999,50
                  .text-body-secondary.text-uppercase.fw-semibold.small Widget title
          // /.col
        // /.row.g-4
      +example()
        .row.g-4
          .col-12.col-sm-6.col-xl-4
            .card(style='--cui-card-cap-bg: #3b5998')
              .card-header.position-relative.d-flex.justify-content-center.align-items-center
                svg.icon.icon-3xl.text-white.my-4
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-facebook-f")
                  |
                .chart-wrapper.position-absolute.top-0.start-0.w-100.h-100
                  canvas#social-box-chart-1(height='90')
              .card-body.row.text-center
                .col
                  .fs-5.fw-semibold 89k
                  .text-uppercase.text-body-secondary.small friends
                .vr
                .col
                  .fs-5.fw-semibold 459
                  .text-uppercase.text-body-secondary.small feeds
          // /.col
          .col-12.col-sm-6.col-xl-4
            .card(style='--cui-card-cap-bg: #00aced')
              .card-header.position-relative.d-flex.justify-content-center.align-items-center
                svg.icon.icon-3xl.text-white.my-4
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-twitter")
                  |
                .chart-wrapper.position-absolute.top-0.start-0.w-100.h-100
                  canvas#social-box-chart-2(height='90')
              .card-body.row.text-center
                .col
                  .fs-5.fw-semibold 973k
                  .text-uppercase.text-body-secondary.small followers
                .vr
                .col
                  .fs-5.fw-semibold 1.792
                  .text-uppercase.text-body-secondary.small tweets
          // /.col
          .col-12.col-sm-6.col-xl-4
            .card(style='--cui-card-cap-bg: #4875b4')
              .card-header.position-relative.d-flex.justify-content-center.align-items-center
                svg.icon.icon-3xl.text-white.my-4
                  use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-linkedin")
                  |
                .chart-wrapper.position-absolute.top-0.start-0.w-100.h-100
                  canvas#social-box-chart-3(height='90')
              .card-body.row.text-center
                .col
                  .fs-5.fw-semibold 500+
                  .text-uppercase.text-body-secondary.small contacts
                .vr
                .col
                  .fs-5.fw-semibold 292
                  .text-uppercase.text-body-secondary.small feeds
          // /.col
        // /.row.g-4
      +example()
        .card-group
          .card
            .card-body
              .text-body-secondary.text-end
                svg.icon.icon-xxl
                  use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-people")
                  |
              .fs-4.fw-semibold 87.500
              .small.text-body-secondary.text-uppercase.fw-semibold.text-truncate Visitors
              .progress.progress-thin.mt-3.mb-0
                .progress-bar.bg-info(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
          .card
            .card-body
              .text-body-secondary.text-end
                svg.icon.icon-xxl
                  use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-user-follow")
                  |
              .fs-4.fw-semibold 385
              .small.text-body-secondary.text-uppercase.fw-semibold.text-truncate New Clients
              .progress.progress-thin.mt-3.mb-0
                .progress-bar.bg-success(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
          .card
            .card-body
              .text-body-secondary.text-end
                svg.icon.icon-xxl
                  use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-basket")
                  |
              .fs-4.fw-semibold 1238
              .small.text-body-secondary.text-uppercase.fw-semibold.text-truncate Products sold
              .progress.progress-thin.mt-3.mb-0
                .progress-bar.bg-warning(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
          .card
            .card-body
              .text-body-secondary.text-end
                svg.icon.icon-xxl
                  use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-chart-pie")
                  |
              .fs-4.fw-semibold 28%
              .small.text-body-secondary.text-uppercase.fw-semibold.text-truncate Returning Visitors
              .progress.progress-thin.mt-3.mb-0
                .progress-bar(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
          .card
            .card-body
              .text-body-secondary.text-end
                svg.icon.icon-xxl
                  use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-speedometer")
                  |
              .fs-4.fw-semibold 5:34:11
              .small.text-body-secondary.text-uppercase.fw-semibold.text-truncate Avg. Time
              .progress.progress-thin.mt-3.mb-0
                .progress-bar.bg-danger(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
      +example()
        .row.g-4
          .col-6.col-lg-4.col-xl-3.col-xxl-2
            .card
              .card-body
                .text-body-secondary.text-end
                  svg.icon.icon-xxl
                    use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-people")
                    |
                .fs-4.fw-semibold 87.500
                .small.text-body-secondary.text-uppercase.fw-semibold.text-truncate Visitors
                .progress.progress-thin.mt-3.mb-0
                  .progress-bar.bg-info(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
          // /.col
          .col-6.col-lg-4.col-xl-3.col-xxl-2
            .card
              .card-body
                .text-body-secondary.text-end
                    svg.icon.icon-xxl
                      use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-user-follow")
                      |
                .fs-4.fw-semibold 385
                .small.text-body-secondary.text-uppercase.fw-semibold.text-truncate New Clients
                .progress.progress-thin.mt-3.mb-0
                  .progress-bar.bg-success(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
          // /.col
          .col-6.col-lg-4.col-xl-3.col-xxl-2
            .card
              .card-body
                .text-body-secondary.text-end
                  svg.icon.icon-xxl
                    use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-basket")
                    |
                .fs-4.fw-semibold 1238
                .small.text-body-secondary.text-uppercase.fw-semibold.text-truncate Products sold
                .progress.progress-thin.mt-3.mb-0
                  .progress-bar.bg-warning(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
          // /.col
          .col-6.col-lg-4.col-xl-3.col-xxl-2
            .card
              .card-body
                .text-body-secondary.text-end
                  svg.icon.icon-xxl
                    use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-chart-pie")
                    |
                .fs-4.fw-semibold 28%
                .small.text-body-secondary.text-uppercase.fw-semibold.text-truncate Returning Visitors
                .progress.progress-thin.mt-3.mb-0
                  .progress-bar(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
          // /.col
          .col-6.col-lg-4.col-xl-3.col-xxl-2
            .card
              .card-body
                .text-body-secondary.text-end
                  svg.icon.icon-xxl
                    use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-speedometer")
                    |
                .fs-4.fw-semibold 5:34:11
                .small.text-body-secondary.text-uppercase.fw-semibold.text-truncate Avg. Time
                .progress.progress-thin.mt-3.mb-0
                  .progress-bar.bg-danger(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
          // /.col
          .col-6.col-lg-4.col-xl-3.col-xxl-2
            .card
              .card-body
                .text-body-secondary.text-end
                  svg.icon.icon-xxl
                    use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-speech")
                    |
                .fs-4.fw-semibold 972
                .small.text-body-secondary.text-uppercase.fw-semibold.text-truncate Comments
                .progress.progress-thin.mt-3.mb-0
                  .progress-bar.bg-info(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
          // /.col
        // /.row.g-4
      +example()
        .row.g-4
          .col-6.col-lg-4.col-xl-3.col-xxl-2
            .card.text-white.bg-info
              .card-body
                .text-white.text-opacity-75.text-end
                  svg.icon.icon-xxl
                    use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-people")
                    |
                .fs-4.fw-semibold 87.500
                .small.text-white.text-opacity-75.text-uppercase.fw-semibold.text-truncate Visitors
                .progress.progress-white.progress-thin.mt-3
                  .progress-bar(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
          // /.col
          .col-6.col-lg-4.col-xl-3.col-xxl-2
            .card.text-white.bg-success
              .card-body
                .text-white.text-opacity-75.text-end
                  svg.icon.icon-xxl
                    use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-user-follow")
                    |
                .fs-4.fw-semibold 385
                .small.text-white.text-opacity-75.text-uppercase.fw-semibold.text-truncate New Clients
                .progress.progress-white.progress-thin.mt-3
                  .progress-bar(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
          // /.col
          .col-6.col-lg-4.col-xl-3.col-xxl-2
            .card.text-white.bg-warning
              .card-body
                .text-white.text-opacity-75.text-end
                  svg.icon.icon-xxl
                    use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-basket")
                    |
                .fs-4.fw-semibold 1238
                .small.text-white.text-opacity-75.text-uppercase.fw-semibold.text-truncate Products sold
                .progress.progress-white.progress-thin.mt-3
                  .progress-bar(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
          // /.col
          .col-6.col-lg-4.col-xl-3.col-xxl-2
            .card.text-white.bg-primary
              .card-body
                .text-white.text-opacity-75.text-end
                  svg.icon.icon-xxl
                    use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-chart-pie")
                    |
                .fs-4.fw-semibold 28%
                .small.text-white.text-opacity-75.text-uppercase.fw-semibold.text-truncate Returning Visitors
                .progress.progress-white.progress-thin.mt-3
                  .progress-bar(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
          // /.col
          .col-6.col-lg-4.col-xl-3.col-xxl-2
            .card.text-white.bg-danger
              .card-body
                .text-white.text-opacity-75.text-end
                  svg.icon.icon-xxl
                    use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-speedometer")
                    |
                .fs-4.fw-semibold 5:34:11
                .small.text-white.text-opacity-75.text-uppercase.fw-semibold.text-truncate Avg. Time
                .progress.progress-white.progress-thin.mt-3
                  .progress-bar(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
          // /.col
          .col-6.col-lg-4.col-xl-3.col-xxl-2
            .card.text-white.bg-info
              .card-body
                .text-white.text-opacity-75.text-end
                  svg.icon.icon-xxl
                    use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-speech")
                    |
                .fs-4.fw-semibold 972
                .small.text-white.text-opacity-75.text-uppercase.fw-semibold.text-truncate Comments
                .progress.progress-white.progress-thin.mt-3
                  .progress-bar(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
          // /.col
        // /.row.g-4
